<template>
  <el-card>
    <el-form>
      <el-form-item label="">
        <el-input class="user-input" placeholder="用户名" />
        <el-button type="primary" :icon="Search">查询</el-button
        ><el-button>清空</el-button>
      </el-form-item>
    </el-form>
    <el-form-item class="user-button">
      <el-button
        type="primary"
        @click="
          addOrUpdateUser({ id: '', username: '', nickName: '', password: '' })
        "
        >添加</el-button
      >
      <el-button type="danger" disabled>批量删除</el-button>
    </el-form-item>
    <!-- 表格 -->
    <el-table
      :data="userList"
      border
      stripe
      class="user-table"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="80" type="index" align="center" />
      <el-table-column prop="username" label="用户名" width="150px" />
      <el-table-column prop="nickName" label="用户昵称" />
      <el-table-column prop="roleName" label="角色列表" />
      <el-table-column prop="gmtCreate" label="创建时间" />
      <el-table-column prop="gmtModified" label="更新时间" />
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="info" :icon="User" size="small" />
          <el-button
            type="primary"
            :icon="Edit"
            size="small"
            @click="addOrUpdateUser(row)"
          />
          <el-popconfirm
            :title="`你确定要删除 ${row.username} 吗?`"
            @confirm="deleUser(row)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 7, 9]"
      layout=" prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @size-change="getUserList"
      @current-change="getUserList"
    />
    <!-- 对话框的显示&&隐藏 -->
    <el-dialog
      v-model="dialogUserVisible"
      :title="`${userFormData.id ? '修改' : '添加'}用户`"
    >
      <el-form ref="userFormRef" :model="userFormData" :rules="userFormRules">
        <el-form-item
          label="用户名称"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="userFormData.username" />
        </el-form-item>
        <el-form-item
          label="用户昵称"
          :label-width="formLabelWidth"
          prop="nickName"
        >
          <el-input v-model="userFormData.nickName" />
        </el-form-item>
        <el-form-item
          label="用户密码"
          :label-width="formLabelWidth"
          prop="password"
          v-show="isShowPassword"
        >
          <el-input v-model="userFormData.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogUserVisible = false">取消</el-button>
          <el-button type="primary" @click="addUserForm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 设置角色 -->
    <!-- <el-dialog v-model="dialogRoleVisible">
      <el-form title="设置角色">
        <el-form-item>
          <el-input />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogRoleVisible = false">取消</el-button>
          <el-button type="primary" @click="xxx"> 确定 </el-button>
        </span>
      </template>
    </el-dialog> -->
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XUser",
};
</script>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { Delete, Search, User, Edit } from "@element-plus/icons-vue";
import {
  getUserListApi,
  addUserListApi,
  updateListApi,
  deleUserListApi,
} from "@/api/acl/user";
import type { UserList } from "@/api/acl/model/userModel";
import { ElMessage } from "element-plus";

const userList = ref<UserList>([]);
const userFormRef = ref();

const loading = ref(false);
//当前页码
const currentPage = ref(1);
// 每页条数
const pageSize = ref(5);
// 总数
const total = ref(0);

const isShowPassword = ref(true);

const dialogUserVisible = ref(false);
const formLabelWidth = "140px";

const getUserList = async () => {
  loading.value = true;
  const res = await getUserListApi(currentPage.value, pageSize.value);
  total.value = res.total;
  userList.value = res.items;
  loading.value = false;
};

onMounted(getUserList);

//添加&&修改用户
const addOrUpdateUser = (row: any) => {
  if (row.id) {
    isShowPassword.value = false;
  } else {
    isShowPassword.value = true;
  }
  dialogUserVisible.value = true;
  userFormData.username = row.username;
  userFormData.nickName = row.nickName;
  userFormData.password = row.password;
  userFormData.id = row.id;
};

//表单数据及表单校验
const userFormData = reactive({
  username: "",
  nickName: "",
  password: "",
  id: "",
  checkAll: false,
});
// 自定义规则
const validatePassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback("密码必须填写");
  } else if (!value || value.length < 6) {
    callback("密码不能小于6位");
  }
  callback();
};

const userFormRules = reactive({
  username: [
    { required: true, message: "请输入用户名称", trigger: "blur" },
    { min: 3, message: "用户名不能小于3位" },
  ],
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  password: [{ required: true, validator: validatePassword }],
});

//复选框发生变化触发的回调
const handleSelectionChange = () => {
  console.log(111);
  userFormData.checkAll = !userFormData.checkAll;
  console.log(userFormData.checkAll);
};

//保存按钮-添加&&修改
const addUserForm = async () => {
  const { username, nickName, password, id } = userFormData;
  if (id) {
    await updateListApi(username, nickName, id);
  } else {
    await addUserListApi(username, nickName, password);
  }
  ElMessage.success(`用户${id ? "修改" : "添加"}成功`);
  dialogUserVisible.value = false;
  userFormRef.value.clearValidate();
  getUserList();
};

//删除单条用户
const deleUser = async (row: any) => {
  await deleUserListApi(row.id);
  ElMessage.success("删除成功");
  getUserList();
};
</script>

<style scoped>
.user-input {
  width: 200px;
  margin-right: 20px;
}
.user-button {
  margin-top: 40px;
}
.user-table {
  margin-bottom: 30px;
}

/*  */
.el-button--text {
  margin-right: 15px;
}
.el-input {
  width: 500px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
